<template>
	<view>
		<view class="od_banner">
			<image src="../../static/images/od_bg_icon.png" mode="widthFix"></image>
			<view class="od-id">
				<!-- 进度条 -->
				<view class="od-jd-out">
					<view class="step  step2">
					</view>
				</view>
				<!-- 文字进度 -->
				<view class="od-jd-text">
					<view class="item">
						<text class="">填写订单</text>
					</view>
					<view class="item">
						<text class="clickText">在线支付</text>
					</view>
					<view class="item">
						<text class="">专人服务</text>
					</view>
					<view class="item">
						<text class="">服务完成</text>
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="box-hd">
				<view class="hd1">
					<view class="left">
						<image :src="service.logo_image?service.logo_image_url:'../../static/images/avatar.jpg'"
							mode="widthFix"></image>
						<text
							style="color: #000;font-weight: 700;font-size: 34rpx;margin-left: 4rpx;">{{service.name}}</text>
					</view>
					<view class="right">
						<text style="color: #999;font-size: 28rpx;margin-left: 4rpx;">服务内容</text>
					</view>
				</view>

				<view class="hd2">
					<view class="left">
						<image :src="service.icon_image?service.icon_image_url:'../../static/images/avatar.jpg'"
							mode="widthFix"></image>
						<text style="color: #000;font-weight: 700;font-size: 30rpx;">
							1234
							<text style="color: #999;font-size: 28rpx;margin-left: 4rpx;font-weight: 400;">本次服务专员</text>
							<text style="color: #72aa59;font-weight: 400;font-size: 28rpx">[重新分配]</text>
						</text>
					</view>
					<view class="right">
						<button>联系</button>
					</view>
				</view>
			</view>
			<view class="box-bd" v-if="service.stype===10 || service.stype===15||service.stype===20">

			</view>
			<view class="box-ft">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.od_banner {
		position: relative;
		height: 220rpx;
		background: linear-gradient(to right, #72aa59, #6bd0ff);

		image {
			position: absolute;
			right: -20rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 150rpx;
		}

		.od-id {
			text-align: center;
			padding: 50rpx 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.od-jd-out {
				height: 30rpx;
				width: 90%;
				padding: 2rpx;
				margin-bottom: 30rpx;
				background-color: #fff;
				border-radius: 15rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: start;
				align-items: center;

				.step {
					height: 90%;
					// line-height: 90%;
					background-color: #72aa59;
					border-radius: 15rpx;
				}

				.step1 {
					width: 25%;
				}

				.step2 {
					width: 50%;
				}

				.step3 {
					width: 75%;

				}

				.step4 {
					width: 100%;
				}
			}

			.od-jd-text {
				width: 80%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item {
					color: rgba(255, 255, 255, .5);
					font-size: 28rpx;
				}

				.clickText {
					font-size: 30rpx;
					color: #fff;
					font-weight: 700;
				}
			}
		}
	}

	.main {
		padding: 0 30rpx;

		.box-hd {
			height: 250rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			position: relative;
			top: -40rpx;
			left: 0;
			padding: 20rpx;
			border-radius: 10rpx;
			box-sizing: border-box;

			image {
				width: 50rpx;
				height: 50rpx;
				vertical-align: middle;

			}

			.hd1,
			.hd2 {
				height: 100%;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

			}

			.hd1 {
				border-bottom: 1rpx solid #eee;

				.left {}
			}

			.hd2 {
				button {
					height: 60rpx;
					line-height: 60rpx;
					border: 1px solid #72aa59;
					color: #72aa59;
				}
			}

		}
	}
</style>